<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>在线看图网</title>
	<style type="text/css">

	</style>
</head>
<body>
	<div id='loadControl' style='height:50px;width:100%;background-color:#444444;color:#ffffff;'>
		把图片拖到这里面全部覆盖
	</div>
	<div id='loadControl2' style='height:50px;width:100%;background-color:#777777;color:#ffffff;'>
		把图片拖到这里面继续显示
	</div>
	<!-- <div class="fixed-btn">		<a href="#">回到顶部</a>	  </div> -->
</body>
<script type="text/javascript" src="../libs/minicomps.min.js"></script>
<script type="text/javascript" src="../libs/easeljs.js"></script>
<script type="text/javascript" src="../libs/TimeFactory.js"></script>
<script type="text/javascript">
	const { Toggle, HSlider,VSlider,Panel, Canvas ,Button,TextArea,TextBox,TextInput,Label,Window,Image,LabelInput,TipsManager,RadioButton,ColorPicker,TabbarWindow,Checkbox,Knob,Stage,MoonTextArea,Dropdown} = mc
	let names=['大小50%','大小100%','看图工具2','清空'];
	let sizes=[0.5,1,1.5,1];
    for(let i=0;i<names.length;i++){
        new Button(document.body,15+i*105,85,names[i],(e)=>{
            state=names.indexOf(e.target.label);
			if(state==2){
				window.open('lookImage-2.html')
			}else if(state==3){
				location.reload();
			}else{
				imgs.forEach((img)=>{
					img.width=img.size.w*sizes[state];
					img.height=img.size.h*sizes[state];
				})
			}
        });
    }
	let label=new TextInput(document.body,450,85,'显示名称');
	new Button(document.body,570,85,'整理成动画',this.setDataWindow.bind(this));
	new HSlider(document.body,700,85,'图片大小',50, 1, 100,this.onImageScale2.bind(this));
	new Checkbox(document.body,860,85,'是否删除所点图片',false,(e)=>{isDeleteImage=e.detail});
	var imgs=[];
	var isDeleteImage=false;
	var control;
	var loadControl = document.getElementById('loadControl');
	loadControl.ondragover = function (e) {
			e.preventDefault();
		}
	loadControl.ondrop = function (e) {
		//console.log(e.dataTransfer.files);
		e.preventDefault();
		files=e.dataTransfer.files;
		imgs.forEach(element => {
			document.body.removeChild(element);
		});
		imgs=[];
		addImage(files)
	}
	var loadControl2 = document.getElementById('loadControl2');
	loadControl2.ondragover = function (e) {
			e.preventDefault();
		}
	loadControl2.ondrop = function (e) {
		//console.log(e.dataTransfer.files);
		e.preventDefault();
		files=e.dataTransfer.files;
		addImage(files)
	}
	//window.addEventListener('keydown', keyDownCb,true);
	window.addEventListener('keyup', keyUpCb,true);
	function keyDownCb(e){
		
	}
	function keyUpCb(e){
		var code=e.keyCode;
		switch(code){
			case 37:
			case 38:
				this.showNext(-1);
				break;
			case 39:
			case 40:
				this.showNext(1);
				break;
		}
	}
	function addImage(files){
		//异步处理，教程网址：https://www.runoob.com/js/js-promise.html
		TimeFactory.useTime('use')
		var promise=new Promise(function (resolve, reject) {
			var i=0;
			function startLoad(){
				var reader = new FileReader();
				reader.onload = function() {//成功
					var img=document.createElement('img');
					img.onclick=onClick;
					img.src=this.result;
					img.name=this.filename;
					imgs.push(img);

					if(i<files.length){
						startLoad();
					}else{
						resolve();
					}
				}
				reader.onerror=function(e){//出错
					reject(e);
				}
				let file=files[i++]
				reader.filename=file.name;
				reader.readAsDataURL(file);
			}
			startLoad();
		});
		promise.then(()=>{//成功
			imgs.forEach(img=>{
				img.size={w:img.width,h:img.height};
				document.body.appendChild(img);
			})
			TimeFactory.useTime('use',1,(num)=>{
				TipsManager.alert('加载成功花了'+num+'毫秒',2000)
			},'')
		}).catch((e)=>{//失败
			console.error(e);
		})
	}
	function onClick(e){
		var img=e.target;
		label.text=img.name;
		if(isDeleteImage){
			console.log('-----------')
			imgs.splice(imgs.indexOf(img),1);
			document.body.removeChild(img);
			return;
		}
		if(img.size.w==0){
			console.log('不可以缩放');
			return;
		}
		if(img.width==img.size.w){
			img.width=img.size.w/2;
			img.height=img.size.h/2;
		}else{
			img.width=img.size.w;
			img.height=img.size.h;
		}
	}

	function setDataWindow(){
		if(!this.dataWindow){
				this.dataWindow=new Window(document.body,100,5,window.innerWidth-200,window.innerHeight-20,'看图小可爱');
				let canvas=new Canvas(this.dataWindow,0,0,this.dataWindow.width,this.dataWindow.height);
				let names=['播放','停止','上一个','下一个','关闭窗口'];
				for(let i=0;i<names.length;i++){
					let btn=new Button(this.dataWindow,i*100,0,names[i],this.onBtnClick.bind(this));
					btn.name=String(i)
				}
				let x=560;
				new HSlider(this.dataWindow,x,2,'播放数度',50, 1, 100,this.onTimeScale.bind(this));
				new HSlider(this.dataWindow,x+220,2,'动画大小',50, 1, 100,this.onImageScale.bind(this));
				new Label(this.dataWindow,x-50,2,'播放数度');
				new Label(this.dataWindow,x+220-50,2,'动画大小');
				control=new HSlider(this.dataWindow,5,canvas.height-50,'播放进度',1, 1, 100,this.onControlImage.bind(this));
				control.setSize(canvas.width-10)
				//new Label(this.dataWindow,x+440-50,2,'播放进度');

				this.stage = new createjs.Stage(canvas);
				this.bitmap = new createjs.Bitmap('');
				this.bitmap.y=20;
				this.stage.addChild(bitmap);
				createjs.Ticker.framerate = 25;
				createjs.Ticker.addEventListener("tick",(e)=>{
					this.onTimer();
				});
		}else{
			this.dataWindow.visible=true;
		}
		if(imgs){
			this.imgsIndex=0;
			var img=imgs[0];
			this.bitmap.image=img;
			this.bitmap.image.size={w:img.width,h:img.height};
		}
	}
	function onTimer(){
		this.stage.update();
		if(this.isPlay){
			if(this.imgsIndex>=imgs.length)this.imgsIndex=0;
			this.bitmap.image=imgs[this.imgsIndex++];
			control.value=(this.imgsIndex/imgs.length)*100;
		}
	}
	function onTimeScale(e){
		var num=e.detail/2;
		createjs.Ticker.framerate = num;
	}
	function onImageScale(e){
		var img=imgs[0];
		if(!img)return;
		var num=e.detail/50;
		var width=img.size.w*num;
		var height=img.size.h*num;
		if(this.bitmap){
			this.bitmap.scale=width/img.size.w;
		}
	}
	function onImageScale2(e){
		var img=imgs[0];
		if(!img)return;
		var num=e.detail/50;
		imgs.forEach(a=>{
			var width=a.size.w*num;
			var height=a.size.h*num;
			[a.width,a.heigth]=[width,height];
		})
	}
	function onControlImage(e){
		var img=imgs[0];
		if(!img)return;
		var num=Math.floor((e.detail/100)*imgs.length);
		if(num==imgs.length){
			num=imgs.length-1;
		}
		console.log(num)
		this.imgsIndex=num;
		this.bitmap.image=imgs[this.imgsIndex];
	}
	function showNext(sign){
		if(!this.bitmap)return;
		this.imgsIndex+=sign;
		if(this.imgsIndex>=imgs.length)this.imgsIndex=0;
		if(this.imgsIndex<0)this.imgsIndex=imgs.length-1;
		this.bitmap.image=imgs[this.imgsIndex];
	}
	function onBtnClick(e){
		var index=parseInt(e.target.name);
		switch(index){
			case 0:this.isPlay=true;break;
			case 1:this.isPlay=false;break;
			case 2:this.showNext(-1);break;
			case 3:this.showNext(1);break;
			case 4:this.dataWindow.visible=false;break;
		}
	}
</script>
</html>